<template>
  <Card>
    <van-rolling-text
        :start-num="0"
        :target-num="total"
        ref="rollingTextRef"
        class="my-rolling-text"
        :duration="1"
    />
    <span class="price"> ￥</span>
    <div id="costChart" class="chart"></div>
  </Card>
  <Card>
    <div id="costRatioChart" class="chart"></div>
  </Card>
  <Card v-for="(item,index) in chartList" :key="index">
    <div :id="item.id" class="chart"></div>
  </Card>

<!--  <Card>-->
<!--    <div id="spraryChart" class="chart"></div>-->
<!--  </Card>-->
</template>
<script setup lang="ts" name="Home">
import {nextTick, onMounted, ref} from "vue";
import {
  costOption,
  chartOption,
  costRatioOption,
  spraryOption,
} from "./index.data";
import {Card} from "/@/components";
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入柱状图图表，图表后缀都为 Chart
import {BarChart, LineChart, PieChart} from "echarts/charts";
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components";
// 标签自动布局、全局过渡动画等特性
import {LabelLayout, UniversalTransition} from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {CanvasRenderer} from "echarts/renderers";
import park from '../../api/park.ts'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
]);
onMounted(() => {
  init();
});

/**
 * 初始化图表函数
 *
 * 初始化成本图、肥料图和成本比例图，并设置各自的图表选项
 */
function init() {
  initChartCost()
  initChart()
  // const fertilizerChart = getChart("fertilizerChart");
  // const costRatioChart = getChart("costRatioChart");
  // const spraryChart = getChart("spraryChart");
  rollingTextRef.value?.start();

  // setChartOption(fertilizerChart, fertilizerOption);
  // setChartOption(costRatioChart, costRatioOption);
  // setChartOption(spraryChart, spraryOption);

}

const total = ref(0)
function initChartCost(){
  park.queryCost().then((r:any)=>{
    costOption.series[0].data = r[0].data
    costOption.title.text = r[0].title
    total.value = r[0].total
    const costChart = getChart("costChart");
    setChartOption(costChart, costOption);
    costRatioOption.series[0].data = r[1].data
    costRatioOption.title.text = r[1].title
    const costRatioChart = getChart("costRatioChart");
    setChartOption(costRatioChart, costRatioOption);
  })
}

const chartList = ref<any>([])
function initChart(){
  park.queryChart().then((r:any)=>{
    chartList.value = r
    nextTick(()=>{
      r.map((item:any)=>{
        const chart = getChart(item.id);
        chartOption.title.text = item.title
        chartOption.series[0] = item
        setChartOption(chart, chartOption);
      })
    })
  })
}
const rollingTextRef = ref();

/**
 * 获取ECharts实例
 *
 * @param id 图表容器的ID
 * @returns ECharts实例
 */
function getChart(id: string) {
  return echarts.init(document.getElementById(id));
}

/**
 * 设置图表的配置选项
 *
 * @param instance 图表实例
 * @param option 配置选项
 */
function setChartOption(instance: any, option: any) {
  instance.setOption(option);
}
</script>

<style>
.chart {
  width: 100%;
  height: 300px;
}

.my-rolling-text {
  --van-rolling-text-color: #67c23a;
  --van-rolling-text-font-size: 24px;
  --van-rolling-text-gap: 1px;
}

.price {
  color: #9a6c2a;
  font-size: 16px;
}
#25b34dee-1d17-4158-92f8-8181bae10cda{
  background-color: red;
}
</style>
